<template>
  <div class="app-container">
    <div>
      <el-input v-model="listQuery.sn" />
      <el-select
        v-model="model"
        placeholder="请选择机种"
        @change="On机种Changed()"
      >
        <el-option
          v-for="item in modelOps"
          :key="item.key"
          :label="item.value"
          :value="item.key"
        />
      </el-select>

      <el-select
        v-model="serial"
        placeholder="请选择品名"
        @change="On品名Changed()"
      >
        <el-option
          v-for="item in serialOps"
          :key="item.key"
          :label="item.value"
          :value="item.key"
        />
      </el-select>

      <el-select
        v-model="iotype"
        placeholder="请选择制程"
        @change="On制程Changed()"
      >
        <el-option
          v-for="item in iotypeOps"
          :key="item.key"
          :label="item.value"
          :value="item.key"
        />
      </el-select>
    </div>
    <!--    ******************************************************  -->
    <div>
      <el-autocomplete
        v-model="model_label"
        class="inline-input"
        :fetch-suggestions="FuzzyGetAll机种"
        placeholder="请输入机种"
        @select="On机种Changed;"
      />

      <el-autocomplete
        v-model="serial_label"
        class="inline-input"
        :fetch-suggestions="FuzzyGetAll品名By机种id"
        placeholder="请选择品名"
        @select="On品名Changed;"
      />

      <el-autocomplete
        v-model="iotype_label"
        class="inline-input"
        :fetch-suggestions="FuzzyGetAll制程By机种idAnd品名id"
        placeholder="请选择制程"
        @select="On制程Changed;"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyTest',
  data() {
    return {

      model: '', // 选中的机种id
      serial: '', // 选中的品名id
      iotype: '', // 选中的制程id

      model_label: '',
      serial_label: '',
      iotype_label: '',

      modelOps: [], // 机种列表
      serialOps: [], // 品名列表
      iotypeOps: [] // 制程列表

    }
  },
  computed: {
    listQuery() {
      return {
        name: '',
        age: '',
        sn: this.$route.query.sn || 'default'

      }
    }

  },
  watch: {
    model(n, o) {
      this.serial = this.iotype = ''
      this.model_label = this.modelOps.find(t => t.key === n)
        ? this.modelOps.find(t => t.key === n).value || ''
        : ''
      this.On机种Changed(n)
    },
    serial(n, o) {
      this.iotype = ''
      this.serial_label = this.serialOps.find(t => t.key === n)
        ? this.serialOps.find(t => t.key === n).value || ''
        : ''
      this.On品名Changed(this.model, n)
    },
    iotype(n, o) {
      this.iotype_label = this.iotypeOps.find(t => t.key === n)
        ? this.iotypeOps.find(t => t.key === n).value || ''
        : ''
    },
    model_label(n, o) {
      this.serial_label = this.iotype_label = ''
      this.model = this.modelOps.find(t => t.value === n)
        ? this.modelOps.find(t => t.value === n).key || ''
        : ''
      this.On机种Changed(this.model)
    },
    serial_label(n, o) {
      this.iotype_label = ''
      this.serial = this.serialOps.find(t => t.value === n)
        ? this.serialOps.find(t => t.value === n).key || ''
        : ''
      this.On品名Changed(this.model, this.serial)
    },
    iotype_label(n, o) {
      this.iotype = this.iotypeOps.find(t => t.value === n)
        ? this.iotypeOps.find(t => t.value === n).key || ''
        : ''
    }
  },
  created() {
    // 页面加载，获取所有机种
    this.GetAll机种()
  },
  methods: {
    /**
     * 2021年7月6日 By MengChengdu
     * 我现在这里给你写上简单的思路，你捋一下，晚上回来教你
     */

    // 首先，思考一下，三级联动，机种 —— 品名 —— 制程 这三者的关系，结合省市联动的经典实例 省 —— 市 —— 县
    // 根据这三者的关系，应该可以想到如下（我们需要定义三个方法）
    // 1. 获取所有机种的方法（它是不需要任何参数的，因为它是第一级）
    //        GetAll机种()
    // 2. 根据第一级已经选中的机种 id，去获取该 id 下包含的品名，这里，就需要一个参数： 机种 id
    //        GetAll品名By机种id(机种id)
    // 3. 同理，获取制程需要两个参数，机种 id，品名 id，某机种某品名下的所有制程
    //        GetAll制程By机种idAnd品名id(机种id, 品名id)

    // 第二步，梳理清楚了这三个方法的意义，并且创建好之后，接下来，梳理这三个方法的调用顺序。按照什么顺序调用？
    // 调用的顺序，比较明显
    // 1. 获取机种的方法 GetAll机种() 在任何情况下都可以调用，因为他没有任何前置条件，（简单来说就是不需要什么限制条件）
    // 2. 获取品名的方法 GetAll品名By机种id()，比较明显， 它有一个必需的参数 —— 机种 id，也就是说，它只能在 用户选中了机种 之后，才可以调用
    // 3. 同理，获取制程的方法，需要用户选中机种、品名 之后才可以调用
    // 切记 2 3 的调用条件，如果提前调用（比如用户还没有选中，此时调用，参数为空，是不会返回结果的）

    // 第三步，调用时机。知道了方法的调用顺序，最后一步，也是最重要的一步，方法该在什么时候触发？
    // 1. 获取机种的方法。因为是个选择条件，所以，在页面加载的时候，就需要触发。也就是说，进入页面之后，用户就需要看到所有的机种，以供其选择
    // 2. 获取品名的方法。因为它有前置条件，上一步中分析过，它需要用户选择 机种 之后，才可以触发，所以，它的触发条件就是 —— 机种栏位 onchanged
    // 3. 同理，获取制程的方法。它的上一级条件是品名，也就是说，品名栏位发生变化后，它需要携带机种id 和新的品名 id，重新发送请求，所以，它的触发条件就是 —— 品名栏位 onchanged

    // 分析到这里，来把我们刚刚分析的几个方法写出来
    GetAll机种() {
      this.modelOps = [
        { key: 'm1', value: '江西省' },
        { key: 'm2', value: '广东省' },
        { key: 'm3', value: '甘肃省' }
      ]
      return this.modelOps
    },
    GetAll品名By机种id(modeId) {
      this.serialOps = [
        { modelId: 'm1', key: 's1', value: '南昌市' },
        { modelId: 'm2', key: 's2', value: '深圳市' },
        { modelId: 'm3', key: 's3', value: '兰州市' },
        { modelId: 'm1', key: 's4', value: '九江市' },
        { modelId: 'm2', key: 's5', value: '东莞市' }
        // 这里的筛选过程不重要，应该在后台完成的
      ].filter(t => t.modelId === modeId)
      return this.serialOps
    },
    GetAll制程By机种idAnd品名id(modelId, serialId) {
      this.iotypeOps = [
        { modelId: 'm1', serialId: 's1', key: 't1', value: '南昌县' },
        { modelId: 'm1', serialId: 's4', key: 't2', value: '永修县' },
        { modelId: 'm2', serialId: 's2', key: 't3', value: '龙华区' },
        { modelId: 'm2', serialId: 's5', key: 't4', value: '莞城区' },
        { modelId: 'm2', serialId: 's5', key: 't5', value: '南城区' },
        { modelId: 'm3', serialId: 's3', key: 't6', value: '城关区' }
      ].filter(t => t.modelId === modelId && t.serialId === serialId)
      return this.iotypeOps
    },

    On机种Changed() {
      // 机种变化，携带机种id请求品名列表
      console.log(this.model)
      this.GetAll品名By机种id(this.model) // 你这里只需要给他后台的接口传参，不需要筛选什么
    },
    On品名Changed() {
      console.log(`${this.model} - ${this.serial}`)
      this.GetAll制程By机种idAnd品名id(this.model, this.serial) // 你这里只需要给他后台的接口传参，不需要筛选什么
    },
    On制程Changed() {
      console.log(
        `选择结束，你选择的是 ${this.model} - ${this.serial} - ${this.iotype}`
      )
    },

    /* Fuzzy Suggestion */
    FuzzyGetAll机种(query, callback) {
      const 机种 = this.GetAll机种()
      var result = query ? 机种.filter(t => t.value.indexOf(query) >= 0) : 机种
      callback(result)
    },

    FuzzyGetAll品名By机种id(query, callback) {
      const 品名 = this.GetAll品名By机种id(this.model)
      var result = query ? 品名.filter(t => t.value.indexOf(query) >= 0) : 品名
      callback(result)
    },

    FuzzyGetAll制程By机种idAnd品名id(query, callback) {
      const 制程 = this.GetAll制程By机种idAnd品名id(this.model, this.serial)
      var result = query ? 制程.filter(t => t.value.indexOf(query) >= 0) : 制程
      callback(result)
    }
  }
}
</script>
